<template>
    <div class="fillcontain">
        <head-top></head-top>
        <div class="table_container">
            <div style="float: right;margin-bottom: 15px">
                <router-link to="/addGood">
                <el-button  size="max" type="primary">添加产品</el-button>
                </router-link>
            </div>

            <el-table
                :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                @expand='expand'
                :expand-row-keys='expendRow'
                :row-key="row => row.index"
                style="width: 100%">
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="产品 ID">
                            <span>{{ props.row.productId }}</span>
                        </el-form-item>
                      <el-form-item label="产品名称">
                        <span>{{ props.row.productName }}</span>
                      </el-form-item>
                      <el-form-item label="产品价格">
                        <span>{{ props.row.productPrice }}</span>
                      </el-form-item>

                        <el-form-item label="产品介绍">
                            <span>{{ props.row.productIntroduce}}</span>
                        </el-form-item>

                      <el-form-item label="是否启用">
                        <span v-show="props.row.userStatus==1" size="small">禁用状态</span>
                        <span v-show="props.row.userStatus==0" size="small">启用状态</span>
                      </el-form-item>
                      <el-form-item label="产品库存">
                        <span>{{ props.row.productsInventory }}</span>
                      </el-form-item>
                        <el-form-item label="产品创建人">
                            <span>{{ props.row.createdUser }}</span>
                        </el-form-item>
                        <el-form-item label="产品更新人">
                            <span>{{ props.row.updateUser }}</span>
                        </el-form-item>
                        <el-form-item label="产品图片">
                            <img src="" style="width: 100px; height: 100px" :src="$host+props.row.productImg"> >
                        </el-form-item>
                        <el-form-item label="产品套餐">
                       <el-button  size="mini" type="warning" @click="toComBoView(props.row.productId)">套餐详情</el-button>
                        </el-form-item>

                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column
                  label="产品名称"
                  prop="productName">
                </el-table-column>
                <el-table-column
                  label="产品介绍"
                  prop="productIntroduce">
                </el-table-column>
                <el-table-column
                  label="销量"
                  prop="month_sale">
                    {{Math.round(Math.random()*100)}}
                </el-table-column>
                <el-table-column
                    label="状态"
                    prop="userStatus">
                    <template scope="scope">
                        {{ scope.row.userStatus | toAdmin }}
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="200">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                       @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button
                      size="mini"
                      type="Success"
                      @click="handleSpecs(scope.$index, scope.row)">添加套餐</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                     @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                  </template>
                </el-table-column>

            </el-table>
            <div class="Pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="pageSize"
                    layout="total, sizes,prev, pager, next"
                    :total="tableData.length"
                    prev-text="上一页"
                    next-text="下一页">
                </el-pagination>
            </div>
            <el-dialog title="修改商品信息" v-model="dialogFormVisible">
                <el-form :model="selectTable">
                    <el-form-item label="产品名称" label-width="100px">
                        <el-input v-model="selectTable.productName" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="产品介绍" label-width="100px">
                        <el-input v-model="selectTable.productIntroduce"></el-input>
                    </el-form-item>
                    <el-form-item label="产品库存" label-width="100px">
                        <el-input v-model="selectTable.productsInventory"></el-input>
                    </el-form-item>
                    <el-form-item label="产品价格" label-width="100px">
                        <el-input v-model="selectTable.productPrice"></el-input>
                    </el-form-item>
                    <el-form-item label="是否启用" label-width="100px">
                            <el-button type="warning" v-if="selectTable.userStatus==1" @click="changeOpen()">禁用状态</el-button>
                        <el-button type="success" v-if="selectTable.userStatus==0" @click="changeOpen()">启用状态</el-button>
                    </el-form-item>

                    <el-form-item label="产品图片" label-width="100px">
                        <p>{{selectTable.productImg}}</p>
                        <el-upload
                            class="upload-demo"
                            :action=posterURI
                            :headers="headers"
                            :on-preview="handlePreview"
                            :on-success="handleSuccess"
                            :on-remove="handleRemove"
                            :file-list="fileList"
                            list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>

                    </el-form-item>
                </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateFood">确 定</el-button>
              </div>
            </el-dialog>


            <el-dialog title="增加设备" v-model="equipFormVisible">
                <el-form :model="equipForm">
                    <el-form-item label="设备名称" label-width="100px">
                        <el-select v-model="equipForm.equipmentId" placeholder="请选择">
                            <el-option
                                v-for="item in equipmentList"
                                :key="item.equipId"
                                :label="item.equipName"
                                :value="item.equipId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设备价格" label-width="100px">
                        <el-input-number v-model="equipForm.equipmentPrice" :min="0" :disabled="true"></el-input-number>
                    </el-form-item>
                    <el-form-item label="设备数量" label-width="100px">
                        <el-input-number v-model="equipForm.equipmentNum" :min="0"></el-input-number>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="equipFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addEquipCancel">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog title="套餐详情" v-model="comBoViewVisible">

                <el-table
                    :data="comBoViewData"
                    border
                    style="width: 100%"
                    max-height="300">
                    <el-table-column
                        prop="productId"
                        label="产品号"
                        width="230">
                    </el-table-column>
                    <el-table-column
                        prop="comboId"
                        label="套餐号"
                        width="150">
                    </el-table-column>
                    <el-table-column
                        prop="comboName"
                        label="套餐名称"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="comboIntroduce"
                        label="套餐介绍"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="comboTechnicals"
                        label="套餐技术"
                        width="120">
                        请查看详情
                    </el-table-column>

                    <el-table-column
                        prop="totalCombo"
                        label="套餐价格"
                        width="100">
                    </el-table-column>


                    <el-table-column
                        fixed="right"
                        label="操作"
                        width="120">
                        <template scope="scope">
                            <el-button
                                @click.native.prevent="modifyRow(scope.$index, scope.row)"
                                type="text"
                                size="small">
                                详情
                            </el-button>
                            <el-button
                                @click.native.prevent="deleteRow(scope.$index, scope.row)"
                                type="text"
                                size="small">
                                移除
                            </el-button>
                        </template>
                    </el-table-column>
            </el-table>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="comBoViewVisible=false">取 消</el-button>
                    <el-button type="primary" >确 定</el-button>
                </div>
            </el-dialog>

            <el-dialog title="详情" v-model="specsModifyVisible">
                <el-form :rules="specsFormrules" :model="specsForm">
                    <el-form-item label="产品Id" label-width="100px">
                        <el-input v-model="specsForm.productId" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="套餐名称" label-width="100px" >
                        <el-input v-model="specsForm.comboName" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="套餐介绍" label-width="100px" >
                        <el-input v-model="specsForm.comboIntroduce" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="套餐技术价格" label-width="100px">
                        <el-input-number v-model="specsForm.comboPrice" :min="0" :max="10000"></el-input-number>
                    </el-form-item>
                    <el-form-item label="套餐技术" label-width="100px">

                        <el-checkbox-group v-model="indexList">
                            <el-checkbox v-for="(item,index) in technicalList" v-model="index" :label="item.technicalId" :key="index" >{{item.technicalName}}</el-checkbox>
                        </el-checkbox-group>
                        <el-button type="success" size="mini" @click="getEquipByTechnicals" style="float: right">一键生成设备</el-button>
                    </el-form-item>
                    <el-form-item label="套餐图片" label-width="100px">
                        <p>{{specsForm.comboImg}}</p>
                        <el-upload
                            class="upload-demo"
                            :action=posterURI
                            :headers="headers"
                            :on-preview="handlePreview"
                            :on-success="handleSuccess2"
                            :on-remove="handleRemove"
                            :file-list="fileList"
                            list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="套餐设备" label-width="100px">
                        <el-button type="success" size="small" @click="addEquip">添加设备</el-button>
                        <el-collapse>
                            <el-collapse-item title="设备详情">
                                <div v-for="(item,index) in specsForm.equipmentLists" :key="index" style="float: left">
                                    <span>{{item.equipName}}</span>
                                    <el-input-number v-model="item.count" controls-position="right"  :min="1" :max="10" style="margin: 10px;" size="small"></el-input-number>
                                </div>
                            </el-collapse-item>

                        </el-collapse>
                    </el-form-item>
                    <el-form-item label="套餐合计价格" label-width="100px">
                        <el-input-number v-model="specsForm.totalCombo" :min="0" :max="10000000" :disabled="true"></el-input-number>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="comBoViewCancel">取 消</el-button>
                    <el-button type="primary" @click="updatespecs">确 定</el-button>
                </div>
            </el-dialog>





            <el-dialog title="添加套餐" v-model="specsFormVisible">
			  	<el-form :rules="specsFormrules" :model="specsForm">
                    <el-form-item label="产品Id" label-width="100px">
                        <el-input v-model="specsForm.productId" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
				    <el-form-item label="套餐名称" label-width="100px" >
				     	<el-input v-model="specsForm.comboName" auto-complete="off"></el-input>
				    </el-form-item>
				    <el-form-item label="套餐介绍" label-width="100px" >
				     	<el-input v-model="specsForm.comboIntroduce" auto-complete="off"></el-input>
				    </el-form-item>
					<el-form-item label="套餐技术价格" label-width="100px">
						<el-input-number v-model="specsForm.comboPrice" :min="0" :max="10000"></el-input-number>
					</el-form-item>
                    <el-form-item label="套餐技术" label-width="100px">

                        <el-checkbox-group v-model="indexList">
                            <el-checkbox v-for="(item,index) in technicalList" v-model="index" :label="item.technicalId" :key="index" >{{item.technicalName}}</el-checkbox>
                        </el-checkbox-group>
                        <el-button type="success" size="mini" @click="getEquipByTechnicals" style="float: right">一键生成设备</el-button>
                    </el-form-item>
                    <el-form-item label="套餐图片" label-width="100px">
                        <p>{{specsForm.comboImg}}</p>
                        <el-upload
                            class="upload-demo"
                            :action=posterURI
                            :headers="headers"
                            :on-preview="handlePreview"
                            :on-success="handleSuccess2"
                            :on-remove="handleRemove"
                            :file-list="fileList"
                            list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="套餐设备" label-width="100px">
                        <el-button type="success" size="small" @click="addEquip">添加设备</el-button>
                        <el-collapse>
                            <el-collapse-item title="设备详情">
                                <div v-for="(item,index) in specsForm.equipmentLists" :key="index" style="float: left">
                                    <span>{{item.equipName}}</span>
                                    <el-input-number v-model="item.count" controls-position="right"  :min="1" :max="10" style="margin: 10px;" size="small"></el-input-number>
                                </div>
                            </el-collapse-item>

                        </el-collapse>
                    </el-form-item>
                    <el-form-item label="套餐合计价格" label-width="100px">
                        <el-input-number v-model="specsForm.totalCombo" :min="0" :max="10000000" :disabled="true"></el-input-number>
                    </el-form-item>
			  	</el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="specsFormVisible==false">取 消</el-button>
			    <el-button type="primary" @click="addspecs">确 定</el-button>
			  </div>
			</el-dialog>
        </div>
    </div>
</template>

<script>
    import headTop from '../components/headTop'
    export default {
        data(){
            return {
                equipForm:{
                    equipmentId: "",
                    equpmentName: "",
                    equipmentPrice: 0,
                    equipmentNum: ""
                },
                comBoViewData: [],
                num:0,
                activeNames: ['1'],
                posterURI:this.$host+"/zk/uploadFileServer/uploadFolder",
                checkList:[],
                selectValue: "",
                restaurant_id: null,
                city: {},
                count: 0,
                tableData: [],
                indexList: [],
                currentPage: 1,
                selectTable: {},
                dialogFormVisible: false,
                equipFormVisible: false,
                comBoViewVisible: false,
                specsModifyVisible: false,
                menuOptions: [],
                selectMenu: {},
                selectIndex: null,
                technicalList: [],
                equipmentList: [],
                pageSize: 5,
                specsForm: {
                    productId:"",
                    comboName: "",
                    comboId: "",
                    comboIntroduce: "",
                    comboPrice: 0,
                    comboTechnicals: [],
                    comboImg: "",
                    equipmentLists: [],
                    totalCombo: 0
		        },
                specsFormrules: {
		        	productId: [
						{ required: true, message: '请输入规格', trigger: 'blur' },
					],
		        },
                fileList: [],
		        specsFormVisible: false,
                expendRow: [],
            }
        },
        created(){
        	this.restaurant_id = this.$route.query.restaurant_id;
            this.initData();
        },
        watch: {
            'specsForm.equipmentLists':{
                handler(){
                    this.specsForm.totalCombo = this.specsForm.comboPrice;
                    this.specsForm.equipmentLists.forEach(item=>{
                        this.specsForm.totalCombo = this.specsForm.totalCombo+ item.equipPrice*item.count;
                    })
                },
                deep:true,
                immediate:true
            },
            'specsForm.comboPrice':{
                handler(newName,oldName){
                    console.log("你变化了")
                    this.specsForm.totalCombo = this.specsForm.comboPrice;
                    this.specsForm.equipmentLists.forEach(item=>{
                        this.specsForm.totalCombo = this.specsForm.totalCombo+ item.equipPrice*item.count;
                    })
                },
                deep:true,
                immediate:true
            },
            'equipForm.equipmentId':{
                handler(newName,oldName){
                    console.log(newName+"我是新人")

                    this.equipmentList.some((item,index)=>{
                        console.log(item.equipId+" =====>>>"+item.equipPrice)
                        if(item.equipId==newName)
                        {
                            this.equipForm.equipmentPrice = item.equipPrice;
                            this.equipForm.equpmentName = item.equipName;
                            return true;

                        }
                    })
                },
                deep:true,
                immediate:true
            },


        },


        computed: {
            headers() {
                return{
                    "Authorization": localStorage.getItem('token')
                }
            },

        },
    	components: {
    		headTop,
    	},
        filters: {
            toAdmin(value){
                if(value==0)
                {
                    value="启用状态"
                }
                else if(value==1)
                {
                    value="禁用状态"
                }
                return value;

            },

            limitWord(value) {
                if (!value) {
                    value = "";
                } else if (value.length > 10) {
                    value = value.slice(0, 10) + "...";
                }
                return value + "...";


            }

        },
        mounted(){
            this.initData();
        },
        activated: function() {
            this.initData();
        },

    // /productTechnical/selectEquipByTechnicals
        methods: {
            comBoViewCancel(){
                this.specsModifyVisible=false;
                this.specsFormVisible = false;
                this.toComBoView(this.specsForm.productId);
                this.specsForm = {
                    productId:"",
                        comboName: "",
                        comboId: "",
                        comboIntroduce: "",
                        comboPrice: 0,
                        comboTechnicals: [],
                        comboImg: "",
                        equipmentLists: [],
                        totalCombo: 0
                };
                this.indexList = [];
                this.checkList = [];




            },
            async modifyRow(index,row){

                this.specsModifyVisible=true;
                await this.selectAllTechnical();
                     this.specsForm = row;
                     console.log(this.specsForm.comboTechnicals.length+"我是实际套餐的长度")
                     this.checkListToIndex();

            },
            deleteRow(index,row){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var that = this
                    this.$axios.delete(this.$host2+"/zk/productTechnical/deleteComBoDTO/"+row.comboId,{
                        headers: {
                            "Authorization": localStorage.getItem('token')

                        }
                    }).then(
                        res=>{
                            if(res.data.code==200){
                                this.toComBoView(row.productId)
                            }else{
                                this.$message.error("删除失败")
                                return

                            }
                        }
                    ).catch(error=>console.log(error));


                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });




            },
            toComBoView(productId){
                this.comBoViewVisible = true;
                var that = this
                this.$axios.get(this.$host2+"/zk/productTechnical/selectComBoDTO/"+productId,{
                    headers: {
                        "Authorization": localStorage.getItem('token')

                    }
                }).then(
                    res=>{
                        that.comBoViewData = res.data.data;

                    }
                ).catch(error=>console.log(error));

            },
            checkListToIndex(){
                if(this.technicalList==null){
                return;

                }
                if(this.equipmentList==null||this.equipmentList.length<1)
                {
                    this.selectAllEquipment()
                }
                console.log(typeof this.indexList)
                this.indexList = [];
                console.log(typeof this.indexList)
                const comTecLen = this.specsForm.comboTechnicals.length;
                const techListLen =  this.technicalList.length;
                console.log(comTecLen)
                console.log(techListLen)

                this.specsForm.comboTechnicals.forEach((item,index)=>{
                    console.log(item.technicalId+"我是蠢货"+item.technicalName)
                   this.technicalList.forEach((teItem,teIndex)=>{
                       console.log(teItem.technicalId)
                     if(item.technicalId==teItem.technicalId){
                      this.indexList.push((teIndex+1).toString());

                     }
                   })
                });



            },
            getEquipByTechnicals(){
                console.log("我们送过去的"+this.indexList+"===>>是的"+typeof this.indexList)
                this.checkList=[];

                this.indexList.forEach(item=>{
                    this.checkList.push(this.technicalList[item-1].technicalId);

                });


                var that = this
                that.specsForm.equipmentLists=[];
                this.$axios.post(this.$host2+"/zk/productTechnical/selectEquipByTechnicals",that.checkList,{
                    headers: {
                        "Authorization": localStorage.getItem('token')

                    }
                }).then(
                    res=>{
                        that.specsForm.equipmentLists = res.data.data;
                        console.log(that.specsForm.equipmentLists+"=========>>>")


                    }
                ).catch(error=>console.log(error));




            },
            addEquipCancel(){
                this.equipFormVisible = false;
                this.specsFormVisible = true;
                if(this.specsForm.equipmentLists==null||this.specsForm.equipmentLists==""||this.specsForm.equipmentLists.size<1)
                {
                    let equipDemo = {
                        equipmentId: this.equipForm.equipmentId,
                        equipName: this.equipForm.equpmentName,
                        equipPrice: this.equipForm.equipmentPrice,
                        count: this.equipForm.equipmentNum
                    }
                    this.specsForm.equipmentLists.push(equipDemo);
                }else {
                    var bool = false;
                    this.specsForm.equipmentLists.some((item, index) => {


                        if (item.equipmentId == this.equipForm.equipmentId) {
                            item.count = item.count + this.equipForm.equipmentNum;
                            this.equipForm = {};
                            bool = true;
                            return true;
                        }
                    })
                    if(bool==false){
                        let equipDemo = {
                            equipmentId: this.equipForm.equipmentId,
                            equipName: this.equipForm.equpmentName,
                            equipPrice: this.equipForm.equipmentPrice,
                            count: this.equipForm.equipmentNum
                        }
                        this.specsForm.equipmentLists.push(equipDemo);

                    }
                }

            },
            addEquip(){
                this.equipFormVisible = true;


            },
            selectAllEquipment(){

                var that = this
                this.$axios.get(this.$host2+"/zk/all-equipment/",{
                    headers: {
                        "Authorization": localStorage.getItem('token')

                    }
                }).then(
                    res=>{
                        that.equipmentList = res.data;
                        console.log(that.equipmentList+"=========>>>")


                    }
                ).catch(error=>console.log(error));




            },
           async selectAllTechnical(){
                var that = this
                await this.$axios.get(this.$host2+"/zk/productTechnical/selectAllTechnical",{
                    headers: {
                        "Authorization": localStorage.getItem('token')

                    }
                }).then(
                    res=>{
                        that.technicalList = res.data.data;
                        console.log(that.technicalList)


                    }
                ).catch(error=>console.log(error));
                return Promise.resolve(that.technicalList)
            },
            handleSuccess(res){
                this.selectTable.productImg = res.data;
                console.log(res.data)

            },
            handleSuccess2(res){
                this.specsForm.comboImg= res.data;
                console.log(res.data)

            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file,) {
                console.log(file);
            },
            changeOpen(){
                if(this.selectTable.userStatus!=null)
                {
                    if(this.selectTable.userStatus==0)
                    {
                        this.selectTable.userStatus=1;
                    }
                    else{
                        this.selectTable.userStatus = 0;
                    }

                }


            },
            addFood(index, row){
                this.$router.push({ path: 'addGood', query: { restaurant_id: row.id }})
            },
            async initData(){

                 await this.getFoods();

            },
            async getFoods(){
                var that = this
                    this.$axios.get(this.$host2+"/zk/all-products/",{
                        headers: {
                            "Authorization": localStorage.getItem('token')

                        }
                    }).then(
                        res=>{
                            that.tableData = res.data.data;
                            console.log(that.tableData)
                        }
                    ).catch(error=>console.log(error));

            },
            updatespecs(){
                this.specsForm.comboTechnicals=[];
                this.indexList.forEach((item,index)=>{
                    this.specsForm.comboTechnicals.push(this.technicalList[index]);

                });

                var that = this
                this.$axios.put(this.$host2+"/zk/productTechnical/updateComBoDTO",this.specsForm,{
                    headers: {
                        "Authorization": localStorage.getItem('token')
                    }
                }).then(
                    res=>{
                        if(res.data.code==200)
                        {
                            this.$message({
                                type:"success",
                                message: "修改成功"
                            });
                            this.specsForm = {
                                productId:"",
                                comboName: "",
                                comboId: "",
                                comboIntroduce: "",
                                comboPrice: 0,
                                comboTechnicals: [],
                                comboImg: "",
                                equipmentLists: [],
                                totalCombo: 0
                            };
                            this.specsModifyVisible=false;

                        }
                        else{
                            this.$message({
                                type:"error",
                                message: res.data.msg
                            });
                        }
                    }
                ).catch(error=>{console.log(error),
                    this.$message({
                        type:"error",
                        message: "修改失败"
                    });});
            },
		    addspecs(){

                this.indexList.forEach(item=>{
                    this.specsForm.comboTechnicals.push(this.technicalList[item-1]);

                });

                var that = this
                this.$axios.post(this.$host2+"/zk/productTechnical/addComBoDTO",this.specsForm,{
                    headers: {
                        "Authorization": localStorage.getItem('token')
                    }
                }).then(
                    res=>{
                  if(res.data.code==200)
                  {
                      this.$message({
                          type:"success",
                          message: "上传成功"
                      });
                      this.specsForm = {
                          productId:"",
                              comboName: "",
                              comboId: "",
                              comboIntroduce: "",
                              comboPrice: 0,
                              comboTechnicals: [],
                              comboImg: "",
                              equipmentLists: [],
                              totalCombo: 0
                      };
                      this.indexList = [];
                  }
                  else{
                      this.$message({
                          type:"error",
                          message: res.data.msg
                      });
                  }
                    }
                ).catch(error=>{console.log(error),
                    this.$message({
                    type:"error",
                    message: "上传失败"
                });});


				this.specsFormVisible = false;
			},
			deleteSpecs(index){
				this.specs.splice(index, 1);
			},
            handleSizeChange: function(size) {
                this.pageSize = size;
                /*console.log(this.pagesize) */
            },
            //点击第几页
            handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage;
                /*console.log(this.currentPage) */
            },

            expand(row, status){
            	if (status) {
            		this.getSelectItemData(row)
            	}else{
                    const index = this.expendRow.indexOf(row.index);
                    this.expendRow.splice(index, 1)
                }
            },
            handleEdit(row) {
                console.log(row.productId)
            	this.getSelectItemData(row, 'edit')
                this.dialogFormVisible = true;
                this.selectTable =JSON.parse(JSON.stringify(row));
                console.log(this.selectTable)
            },
            handleSpecs(index,row) {
                console.log(row.productId+"=================>>>>")
                this.getSelectItemData(row, 'edit')
                this.specsForm.productId = row.productId;
                this.selectAllTechnical();
                this.selectAllEquipment();
                this.specsFormVisible = true;
                console.log(this.specsForm)
            },




            async getSelectItemData(row, type){

                this.selectTable = {...row, ...{restaurant_name: restaurant.name, restaurant_address: restaurant.address, category_name: category.name}};

                this.selectMenu = {label: category.name, value: row.category_id}
                this.tableData.splice(row.index, 1, {...this.selectTable});
                this.$nextTick(() => {
                    this.expendRow.push(row.index);
                })

            },
            handleSelect(index){
            	this.selectIndex = index;
            	this.selectMenu = this.menuOptions[index];
            },
            async handleDelete(index, row) {
                alert("确定删除嘛？")
                var that =this;
                this.$axios({
                    method:'DELETE',
                    url: that.$host2+"/zk/all-products/"+row.productId,
                    headers:{
                        "Authorization": localStorage.getItem('token')
                    },
                }).then(res=>{
                    if(res.data.code==200){
                        that.$message.success("删除产品成功")
                        that.getFoods();


                    }else{

                        that.$message.error("删除产品失败，请稍后重试")

                    }

                }).catch(error=>{
                    that.$message.error("删除产品失败，请稍后重试")



                })
            },
            handleServiceAvatarScucess(res) {
                if (res.status == 1) {
                    this.selectTable.image_path = res.image_path;
                }else{
                    this.$message.error('上传图片失败！');
                }
            },
            beforeAvatarUpload(file) {
                const isRightType = (file.type === 'image/jpeg') || (file.type === 'image/png');
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isRightType) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isRightType && isLt2M;
            },
            async updateFood(){
                this.dialogFormVisible = false;
                try{
                    this.$axios({
                        method: 'put',
                        url: this.$host2+`/zk/all-products/`,
                        headers:{
                            "Authorization": localStorage.getItem('token')
                        },
                        params: {
                            productId: this.selectTable.productId,
                            productName: this.selectTable.productName,
                            productImg: this.selectTable.productImg,
                            productIntroduce: this.selectTable.productIntroduce,
                            productPrice: this.selectTable.productPrice,
                            userStatus: this.selectTable.userStatus,
                            productsInventory: this.selectTable.productsInventory,
                            updateUser: "金宇轩"

                        },}).then(res=>{
                            if(res.data.code==200){
                                this.$message({
                                    type: 'success',
                                    message: '更新成功'
                                });
                                this.getFoods();
                            }else{
                                this.$message({
                                    type: 'error',
                                    message: res.data.msg
                                });
                            }
                    }).catch(error=>{
                        console.log(error)
                        this.$message({
                            type: 'error',
                            message: res.data.msg
                        });
                    });

                }catch(err){
                    console.log('更新套餐信息失败', err);
                }
            },
        },
    }
</script>

<style lang="less">
	@import '../style/mixin';
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }

    ::-webkit-scrollbar{
        /*滚动条整体样式*/
        width:10px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height:10px;
        background-color: deepskyblue;
    }
    ::-webkit-scrollbar-track

    {

        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

        border-radius: 100px;

        background-color: #F5F5F5;

    }
    .table_container{
        padding: 20px;
    }
    .Pagination{
        display: flex;
        justify-content: flex-start;
        margin-top: 8px;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }
    .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }
</style>
